<template>
    <div class="Mybey">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title" style="color:#141414">金币兑换</h1>
        </header>
        <div class="Gold">
            <span>当前银币数量</span>
            <span>{{coin.silver_coin==null?"0":coin.silver_coin}}</span>
        </div>
        <div class="GoldNumber">
            兑换金币数量 <input type="text" placeholder="金币越换数量" id="gold_coin">
        </div>
        <div class="btn">
            <mt-button size="large" type="danger" @click="exchange()">保存</mt-button>
        </div>
        <div class="mint-msgbox-wrapper" style="position: absolute; z-index:20001;display:none">
            <div class="mint-msgbox">
                <div class="box">
                    <div class="title">您兑换的金币已到账</div>
                    <div class="btn">
                        <mt-button size="large" type="danger" @click="purchase()">返回游戏</mt-button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import { MessageBox } from "mint-ui";
export default {
    data() {
        return {
            is: 1,
            coin: {gold_coin: "0", silver_coin: "0"}
        };
    },
    mounted() {
        this.getCoin();
    },
    methods: {
        getCoin: function() {
            var Data={};
            Data['uid']=2;//用户ID
            this.$http.post("http://192.168.2.37/index.php/api/xjssc.xjssc/getCoin",Data).then(result => {
                if (result.body.code == 1) {
                    this.coin=result.body.data;
                } else {
                    Toast(result.body.msg);
                }
            });
        },
        exchange: function() {
            var Data={};
            Data['uid']=2;//用户ID
            Data['gold_coin']=document.querySelector('#gold_coin').value;//兑换金币
            this.$http.post("http://192.168.2.37/index.php/api/xjssc.xjssc/exchange",Data).then(result => {
                if (result.body.code == 1) {
                    this.getCoin()
                    this.purchase();
                } else {
                    Toast(result.body.msg);
                }
            });
        },
        purchase: function() {
            var mint=document.querySelector('.mint-msgbox-wrapper')
            mint.style.display="block"
        }
    }
};
</script>
<style lang="scss" scoped>
.Mybey {
    .mint-msgbox-wrapper {
        .mint-msgbox {
            height: 3.1rem;
            width: 5.44rem;
            border-radius: 10px;
            line-height: 2.1rem;
            text-align: center;

            .box {
                .title {
                    font-family: PingFangSC-Regular;
                    font-size: 0.34rem;
                }
                .btn{
                    margin: 0 auto;
                    width: 80%;
                }
            }
        }
    }
    padding-top: 40px;
    .Gold {
        height: 1rem;
        line-height: 1rem;
        background: #fff;
        margin-bottom: 1px;
        span {
            margin-left: 0.3rem;
            font-size: 0.28rem;
        }
    }
    .GoldNumber {
        height: 1rem;
        background: #fff;
        padding-left: 0.3rem;
        line-height: 1rem;
        font-size: 0.28rem;
        input {
            border: none;
            width: 4rem;
        }
    }
    .btn {
        padding: 0 0.5rem;
        margin-top: 0.78rem;
    }
}
</style>    
